<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!--List all of orders-->
            <div class="table-outer">
                <h1 class="center-font">查看订单</h1><br>
               	<c:if test="${orders.size() == 0}">
               	<div class="out-container">
					<div class="boo-wrapper">
						<div class="boo">
							<div class="face"></div>
						</div>
						<div class="shadow"></div>
						<h1>Sorry,您还没有订单哟~</h1>
					</div>
				</div>
               	</c:if>
                <c:forEach var="o" items="${orders}">
                <table class="table table-striped">
                    <thead class="yellow-bg">
                    <tr>
                        <th colspan="2">下单时间：${o.startTime}</th>
                        <th>客户号码：${o.client.cTel}</th>
                        <c:if test="${o.oStatus == \"2\"}">
                        	<th>订单状态：已接</th>
                        </c:if>
                        <c:if test="${o.oStatus == \"3\"}">
                        	<th>订单状态：已确认收货</th>
                        </c:if>
                        <c:if test="${o.oStatus == \"4\"}">
                        	<th>订单状态：已拒绝</th>
                        </c:if>
                    </tr>
                    <tr style="border-bottom: 2px solid gold;">
                    	<th colspan="2">配送地址：${o.client.cLocation}</th>
                    	<th class="toggle" onclick="showOrhidd(${o.oId})" id="${o.oId}" style="background-color:#fffff0;">查看详情 <span style="margin-left:15px;">
                    		<i class="fa fa-lg fa-angle-down fa-angle-double-up yellow-bg"></i></span>
                    	</th>
                    	<th></th>
                    </tr>
                    
                    </thead>
                    <tbody class="form" id="f${o.oId}" style="display:none;">
                    <tr>
	                    <td colspan="4">
	                    	<h4><b>订单菜品列表</b></h4>
	                    </td>
                    </tr>
                    <tr>
                        <td>菜品名称</td>
                        <td>单价/&yen;</td>
                        <td>数量</td>
                        <td>价格/&yen;</td>
                    </tr>
                    <c:forEach var="f" items="${o.foodlist}">
	                    <tr>
	                        <td>${f.fName }</td>
	                        <td>${f.fPrice }</td>
	                        <td>${f.num }</td>
	                        <td>${f.fPrice * f.num}</td>
	                    </tr>
	                    <c:set value="${sum + f.fPrice * f.num}" var="sum" />
                    </c:forEach>
                    
                    	<tr>
	                    	<td style="font-weight:bolder;">总计/&yen;：</td>
	                    	<td colspan="2"></td>
	                    	<td class="order-sum">${sum}</td>
	                    	<c:set value="0" var="sum" />
	                    </tr>
                    </tbody>
                </table>
                
                </c:forEach>

			<nav class="page-ctrl">
				<ul class="pagination">${pageCode}</ul>
			</nav>

	<script>
	
		function showOrhidd(oid){
			$('#'+oid).children('span').children('i').toggleClass('fa-angle-down');
			$('#f'+oid).animate({
	            height: "toggle",
	            'padding-top': 'toggle',
	            'padding-bottom': 'toggle',
	            opacity: "toggle"
	        }, "normal");
		}

	</script>
	
</div>